<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>html5 game</title>
	<script type="text/javascript" src="../../lufylegend-1.8.12.simple.min.js"></script>
	</head>
	<body>
			<div id="legend"></div>
			<script type="text/javascript">
				init(100,"legend",800,450,main);
				var imgData = [
					{name:"back",path:"back.jpg"},
					{name:"player",path:"hero.png"}
				];
				var imglist;
				var backLayer,hero,index=0;
				function main(){
					LLoadManage.load(imgData,null,gameInit);
				}
				function gameInit(result){
					LGlobal.setDebug(true);
					imglist = result;
					backLayer = new LSprite();
					addChild(backLayer);
					var back = new LBitmap(new LBitmapData(imglist["back"]));
					backLayer.addChild(back);

					var list = LGlobal.divideCoordinate(560,736,8,8);
					var data = new LBitmapData(imglist["player"],0,0,70,92);
					hero = new CharacterSprite(new LBitmap(data),list,3*10-data.width/2,3*10-data.height+20);
					backLayer.addChild(hero);
					
					backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
					backLayer.addEventListener(LMouseEvent.MOUSE_UP,onmouseup);
				}
				function onframe(){
					hero.onframe();
				}
				function onmouseup(event){
					hero.toCoordinate = {x:(event.offsetX/3 >>> 0)*3-hero.getWidth()/2,y:(event.offsetY/3 >>> 0)*3-hero.getHeight()+20}
				}
				function CharacterSprite(bitmap,imageArray,x,y){
					base(this,LSprite,[]);
					var self = this;
					self.x = x;
					self.y = y;
					self.toCoordinate = {x:x,y:y};
					self.animeIndex = 0;
					self.dirindex = 0;
					self.dirmark = {"0,1":0,"-1,0":1,"1,0":2,"0,-1":3,"-1,1":4,"1,1":5,"-1,-1":6,"1,-1":7};
					
					self.bitmap = bitmap;
					self.imageArray = imageArray;
					self.addChild(bitmap);
				}
				CharacterSprite.prototype.onframe = function (){
					var self = this;
					self.animeIndex++;
					if(self.animeIndex >= self.imageArray[0].length){
						self.animeIndex = 0;
					}
					var markx = 0,marky = 0;
					var l = 3;
					if(self.x > self.toCoordinate.x){
						self.x -= l;
						markx = -1;
					}else if(self.x < self.toCoordinate.x){
						self.x += l;
						markx = 1;
					}
					if(self.y > self.toCoordinate.y){
						self.y -= l;
						marky = -1;
					}else if(self.y < self.toCoordinate.y){
						self.y += l;
						marky = 1;
					}
					if(markx !=0 || marky != 0){
						var mark = markx+","+marky;
						self.dirindex = self.dirmark[mark];
					}
					self.bitmap.bitmapData.setCoordinate(self.imageArray[self.dirindex][self.animeIndex].x,self.imageArray[self.dirindex][self.animeIndex].y);
					
				}
			</script>
			
			
			
	</body>
</html>
